<template>
    <div>
        <div style="padding: 2px 10px 10px 10px">
            <el-button type="primary" @click="handleAddDictData">新增字典数据</el-button>
        </div>
        <el-table :data="dictDataList">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="字典编码" align="center" prop="dictCode"/>
            <el-table-column label="字典标签" align="center" prop="dictLabel">
                <template v-slot="scope">
                    <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
                    <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">
                        {{scope.row.dictLabel}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="字典键值" align="center" prop="dictValue"/>
            <el-table-column label="字典排序" align="center" prop="dictSort"/>
            <el-table-column label="状态" align="center" prop="status">
                <template v-slot="scope">
                    <el-switch v-model="scope.row.status"
                               active-value="0"
                               inactive-value="1"
                               @change="handleStatusChange(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template v-slot="scope">
                    <el-button
                           
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdateDictData(scope.row)"
                    >修改
                    </el-button>
                    <el-button
                           
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDeleteDictData(scope.row)"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <update-data :title="title" :open="open" :form="form"
                 v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-data>
</template>

<script>
    import {updateSysDictData,deleteSysDictData} from '/src/api/system/dict'
    import updateData from './updateData.vue'

    export default {
        name: "dictData",
        components: {updateData},
        props: {
            dictType: String
        },
        data() {
            return {
                // 状态数据字典
                statusOptions: [],
                // 查询参数
                queryParams: {
                    dictName: undefined,
                    dictType: undefined,
                    status: undefined
                },
                //查询结果
                dictDataList: [],
                //新增或修改
                title: '',
                open: false,
                form: {},
            }
        },
        created() {
            this.init()
        },
        methods: {
            //初始化
            init() {
                this.getDicts("sys_normal_disable").then(response => {
                    this.statusOptions = response.data;
                });
                this.getDictData()
            },
            //查询字典类型详细
            getDictData() {
                this.getDicts(this.dictType).then(response => {
                    this.dictDataList = response.data
                });
            },
            //新增字典数据
            handleAddDictData() {
                this.title = "新增字典数据"
                this.open = true
                this.form = {dictType: this.dictType}
            },
            //修改字典数据
            handleUpdateDictData(row) {
                this.title = "修改字典数据"
                this.open = true
                this.form = row
            },
            //删除字典数据
            handleDeleteDictData(row) {
                this.$confirm('是否确认删除名称为"' + row.dictType + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return deleteSysDictData(row.dictCode);
                }).then(() => {
                    this.getDictData();
                    this.msgSuccess("删除成功");
                })
            },
            //更改状态
            handleStatusChange(row) {

            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getDictData()
            },
        }
    }
</script>

<style scoped>

</style>
